<template>
  <div class="mall_detail container">
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar left-icon="left"
      title="商品详情" @clickLeft="back" />
    <u-swiper class="shop-swipe" :list="imgs" @change="onChange"></u-swiper>

    <!-- 商品信息card -->
    <div class="flex-between-center goods-info-card div-sizing">
      <div class="goods-title van-multi-ellipsis--l2">
        {{ info.goods_name }}
      </div>
      <div class="goods-price van-ellipsis">
        <span>￥{{ info.price }}</span>
      </div>
      <div class="flex-between-center goods-sell van-ellipsis">
        <span>库存：{{ info.stock }}</span>
        <span v-if="info.postage_money != 0">邮费：{{ info.postage_money }}</span>
        <span v-else>包邮</span>
      </div>
    </div>

    <div class="detail">
      <div class="detail-title">
        商品详情
      </div>
      <div v-html="info.content" />
    </div>
    <div class="flex-between-center mall_footer div-sizing">
      <u-icon name="arrow-left" class="home-icon" @click="back" />
      <div class="vant-btn">
        <u-button type="success" @click="submitBtn">
          立即购买
        </u-button>
      </div>
    </div>
    <u-popup :show="show" mode="bottom" class="pay-pup div-sizing">
      <u-icon name="close" class="pup-close-icon" @click="show = false" />
      <div>
        <div class="pup-title van-ellipsis">
          {{ info.goods_name }}
        </div>
        <div class="flex-between-center shop-price">
          <span class="shop-price-width van-ellipsis">￥:{{ info.price }}</span>
        </div>
      </div>
      <div class="pup-goods-spce">
        <div v-for="(item,index) in info.specification" :key="index" class="">
          <div class="pop-spce-title">
            {{ index }}
          </div>
          <div class="flex-between-center pop-size-div">
            <div v-for="(size,i) in item" :key="i" class="size-num van-ellipsis"
              :class="{'size-num-ac' : acSpec[index] === size}" @click="changeSpace(size,index)">
              {{ size }}
            </div>
          </div>
        </div>
        <div class="pop-spce-title">
          数量
        </div>
        <div class="pup-num-div">
          <u-number-box v-model="value" @change="valChange"></u-number-box>
        </div>
      </div>
      <div class="vant-btn div-sizing">
        <u-button :class="info.stock == 0 ? 'btn-none' : '' " @click="submitBtn()">
          立即购买
        </u-button>
      </div>
    </u-popup>
  </div>
</template>

<script>
  import {
    getGoodsDetail
  } from '@/api/index.js'
  export default {
    name: 'Malldetail',
    data() {
      return {
        imgs: [],
        info: {
          specification: [],
          lunbo: ['']
        }, // 商品详细信息 名称 价格..
        id: null, // 当前商品ID
        mallclass: 0,
        group_id: null,
        collInfo: {},
        show: false, // 购买选择规格弹窗
        value: 0,
        current: 0,
        acSpec: {}
      }
    },
    onLoad(opt) {
      this.id = opt.id
      // this.$cookie.remove('address')
      // if (this.$route.query.i) {
      //   this.id = this.$AES.decrypt(this.$route.query.i)
      // } else {
      //   this.$ui.toast('参数错误')
      //   this.$router.go(-1)
      // }
      this.get_goodsInfo()
    },
    methods: {
      submitBtn() {
        this.$ui.push('/pages/shop/mall_payment?id=' + this.id)
      },
      back() {
        uni.navigateBack()
      },
      // 商品详情
      get_goodsInfo() {
        const vm = this
        getGoodsDetail({
          id: vm.id
        }).then(res => {
          if (res.code == 1) {
            vm.imgs = res.data.lunbo || []
            const info = res.data
            vm.info = info
          }
        })
      },
      // 点击改变规格
      changeSpace(item, index) {
        this.$set(this.acSpec, index, item)
      },
      goPay() {
        const spec = Object.keys(this.acSpec)
        let specdif = []
        if (this.info.specification) {
          specdif = Object.keys(this.info.specification)
        }
        if (this.info.stock == 0) {
          this.$ui.toast('库存不足')
        } else if (spec.length != specdif.length) {
          this.$ui.toast('请选择规格')
        } else {
          let specData = []
          for (const i in this.acSpec) {
            specData.push(this.acSpec[i])
          }
          specData = JSON.stringify(specData)
          this.$router.push({
            path: '/mallPayment',
            query: {
              i: this.$AES.encrypt(this.info.id),
              s: this.value,
              spec: specData
            }
          })
        }
      },
      // swiper改变
      onChange(index) {
        this.current = index
      }
    }
  }
</script>

<style lang="less" scoped>
  .mall_detail {
    background: #f7f7f7;

    .van-cell__title {
      color: #282828;
    }

    .shop-swipe {
      width: 100%;
      height: 1000rpx;
      margin-bottom: 20rpx;
      background: #ffffff;

      .van-swipe-item {
        position: relative;
        font-size: 20rpx;
        line-height: 150rpx;
        text-align: center;
        background: #ffffff;

        img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }

    .custom-indicator {
      position: absolute;
      right: 30rpx;
      bottom: 30rpx;
      padding: 2rpx 14rpx;
      font-size: 20rpx;
      border-radius: 14rpx;
      background: rgba(0, 0, 0, 0.2);
    }

    .img-title {
      width: 100%;
      height: auto;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .goods-info-card {
      width: 100%;
      padding: 20rpx 42rpx 20rpx 24rpx;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      color: #282828;
      font-size: 28rpx;
      background: #ffffff;
      margin-bottom: 28rpx;

      .goods-price {
        max-width: 100%;
        color: #ff6666;
        margin-bottom: 10rpx;
        font-size: 32rpx;
        margin-bottom: 18rpx;
        display: flex;
        align-items: center;

        .goods-price-img {
          width: 30rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }

        .price-jf {
          height: 52rpx;
          line-height: 52rpx;
          padding: 0 8rpx;
          margin-left: 24rpx;
          color: #feffff;
          font-size: 26rpx;
          background: #da4f41;
          border-radius: 4rpx;
        }
      }

      .goods-tag {
        color: #e07e36;
        font-size: 24rpx;
        margin-bottom: 8rpx;
      }

      .goods-title {
        max-width: 100%;
        color: #000000;
        // font-weight: bold;
        line-height: 48rpx;
      }

      .goods-sell {
        width: 100%;
        font-size: 26rpx;
        margin-top: 10rpx;
      }
    }

    // 间隔
    .div-block {
      width: 100%;
      height: 26rpx;
      background: #f8f8f8;
    }

    // 详情
    .detail {
      width: 100%;
      padding: 24rpx 24rpx 140rpx;
      color: #282828;
      box-sizing: border-box;
      background: #ffffff;
      position: relative;

      .detail-title {
        color: #333333;
        font-size: 28rpx;
        // font-weight: bold;
        margin-bottom: 24rpx;
      }
    }

    // 底部
    .mall_footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 120rpx;
      padding: 10rpx 30rpx;
      background: #ffffff;

      // box-shadow: 0rpx -6rpx 12rpx rgba(0, 0, 0, 0.05);
      .home-icon {
        font-size: 50rpx;
        color: #707070;
        margin-right: 30rpx;
      }

      .vant-btn {
        width: 100%;
        margin: 0;
        justify-content: flex-end;
      }

      .van-button {
        width: 278rpx;
        height: 68rpx;
        line-height: 68rpx;
        // background: #A82835;
        border-radius: 34rpx;
      }
    }

    // 购买弹窗
    .pay-pup {
      height: 980rpx;
      padding: 20rpx 32rpx;

      .pup-close-icon {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        font-size: 32rpx;
        color: #cfcfcf;
        z-index: 102;
      }

      .van-card {
        padding: 0;
        height: 200rpx;
        background: #ffffff;

        .van-card__thumb {
          height: 200rpx;
          width: 200rpx;
        }

        .van-card__content {
          height: 200rpx;
          align-items: flex-start;
          justify-content: flex-start;
        }

        .shop-price {
          justify-content: flex-start;
          font-size: 28rpx;
          margin-top: 30rpx;
        }

        .shop-price-width {
          color: #a00000;
        }

        .pup-title {
          width: 400rpx;
          font-size: 32rpx;
          color: #686868;
          margin-top: 12rpx;
        }
      }

      .van-card:not(:first-child) {
        margin: 0;
      }

      .pop-size-div {
        justify-content: flex-start;
        flex-wrap: wrap;

        .size-num {
          background: #e8e8e8;
          border-radius: 30rpx;
          margin-right: 24rpx;
          min-width: 120rpx;
          max-width: 200rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          margin-bottom: 20rpx;
        }

        .size-num-ac {
          background: #289c70;
          color: #ffffff;
        }
      }

      .pup-goods-spce {
        margin-top: 40rpx;
        min-height: 474rpx;
        overflow-y: scroll;

        &>.pop-spce-title {
          margin-top: 30rpx;
        }
      }

      .pop-spce-title {
        margin: 0 0 14rpx;
      }

      .pup-num-div {
        width: 100%;
        margin: 0 auto;
        padding: 20rpx 0 40rpx;

        .van-stepper {
          text-align: center;
          display: flex;
          justify-content: flex-start;
        }
      }

      .vant-btn {
        width: 100%;
        padding: 0 32rpx;
        position: fixed;
        bottom: 50rpx;
        left: 0;
        margin: 0;

        .van-button {
          width: 100%;
          font-size: 28rpx;
          height: 68rpx;
          line-height: 68rpx;
          // background: #a82835;
          border-radius: 34rpx;
        }

        .btn-none {
          color: #ffffff;
          background: rgba(#dedede, 0.5);
        }
      }
    }
  }
</style>

<style lang="less">
  .mall_detail {

    .van-stepper__minus,
    .van-stepper__plus {
      height: 44rpx;
      width: 44rpx;
      border-radius: 50%;
      border: 2rpx soild #e9e9e9;
    }

    .van-stepper__input {
      color: #ff48b4;
      min-width: 140rpx;
      background: #ffffff;
    }

    .van-swipe__indicator {
      background: #bfbfbf;
    }
  }
</style>
